<template>
	<view style="background: #FAFAFC;">
		<!-- <nav-bar></nav-bar> -->
		<nav-bar-yuanqu></nav-bar-yuanqu>
		<view style="margin-top:13px;padding: 0 16px;">
			<view class="flex flex-row" style="height: 38px;background: #FFFFFF;position: relative;">
				<view class="inputlable"></view>
				<view class="inputcontent"><u--input placeholder="请输入内容" border="surround"
						v-model="parkListQuery.yuanquname"></u--input></view>
				<view
					style="background: #FE7743;font-size: 10px;font-weight: 600;color: #FFFFFF;padding: 8px 13px;position: absolute;top: 3px;right: 4px;"
					@click="handleFilter">
					搜索
				</view>
			</view>
		</view>
		<view class="flex flex-row justify-evenly items-center"
			style="margin-top:25px;font-size: 12px;font-weight: 400;color: #000000;background-color: #FFFFFF;height:32px;">
			<!-- <view>区域</view>
			<view>价格</view>
			<view>面积</view>
			<view>更多</view> -->
			<view class="root" style="line-height: 38px;">
				<ren-dropdown-filter :filterData="filterData" :defaultIndex="defaultIndex"
					@onSelected="onSelected"></ren-dropdown-filter>
			</view>
		</view>

		<view class="flex justify-center items-center"
			style="margin-top:30px;padding-bottom:20px;font-size: 12px;font-weight: 500;color: #9C9C9C;">
			共有符合条件的园区
			<view style="color: #FE7743;">{{ total }}</view>
			家
		</view>
		<view style="padding: 0px 17px;">
			<view v-for="(item, index) in parkList" :key="index" class="neirongitem" @click="goToDetailView(item.id)"
				style="margin-bottom:18px;">
				<view class="left">
					<image :src="item.logourl" style="width:100%;height: 191px;"></image>
					<view class="leftIcon">
						<view class="leftIconText">{{ item.guojiajibie }}</view>
					</view>
					<view class="leftVR" v-if="item.ifvr == 'Y'">
						<view class="leftVRText">VR</view>
					</view>

					<view style="position: absolute;left:0;bottom:0;color:#FFFFFF;height:41px;width: 100%;"
						class="flex flex-row justify-between items-center">
						<view class="flex" style="margin-left:16px;">
							<view class="flex justify-center items-center"
								style="width: 15px;height: 15px;background: #FE7743;font-size: 12px;font-weight: 400;color: #FFFFFF;">
								{{ item.yuanqujiaobiao }}
							</view>
							<view style="display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;margin-left:4px;font-size: 14px;font-weight: 500;color: #FFFFFF;">
								{{ item.yuanquname }}
							</view>
						</view>
						<view
							style="width: 66px;margin-right:0px;font-size: 12px;font-weight: 500;color: #FFFFFF;margin-left: 10px;">
							{{ item.hangyeleixingname }} {{ item.cityname }}
						</view>
					</view>
				</view>
				<view class="right flex-1">
					<view class="flex flex-row justify-between" style="padding: 9px 18px;">
						<view style="margin-left:3px;font-size: 10px;font-weight: 700;">办公房租</view>
						<view style="margin-left:3px;font-size: 13px;font-weight: 700;">{{ item.bangongfangzu }}元/㎡/天
						</view>
					</view>
					<view class="yuanquhuaxiang flex flex-row" style="">
						<view class="items flex flex-row">
							<view v-for="(item2, index2) in item.yuanqubiaoqianArr" :key="index2" class="item"
								style="font-size: 10px;font-weight: 400;color: #FE7743;">
								{{ item2 }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue';
	export default {
		data() {
			return {
				total: 0,
				pageNum: 1,
				pageSize: 10,
				queryOption: 0,
				orderbyfield: 1,
				parkList: [],
				parkListQuery: {
					yuanquname: ''
				},
				filterData: [
					[{
							text: '区域',
							province: ''
						},
						{
							text: '北京',
							province: 110000000000
						},
						{
							text: '天津',
							province: 120000000000
						},
						{
							text: '河北',
							province: 130000000000
						},
						{
							text: '山西',
							province: 140000000000
						},
						{
							text: '辽宁',
							province: 210000000000
						},
						{
							text: '吉林',
							province: 220000000000
						},
						{
							text: '黑龙江',
							province: 230000000000
						},
						{
							text: '上海',
							province: 310000000000
						},
						{
							text: '江苏',
							province: 320000000000
						},
						{
							text: '浙江',
							province: 330000000000
						}
					],

					[{
							text: '类别',
							yuanquleixing: ''
						},
						{
							text: '高新技术园区',
							yuanquleixing: 1
						},
						{
							text: '物流园区',
							yuanquleixing: 2
						},
						{
							text: '工业园区',
							yuanquleixing: 3
						},
						{
							text: '创意园区',
							yuanquleixing: 4
						},
						{
							text: '生物园区',
							yuanquleixing: 5
						},
						{
							text: '研发总部',
							yuanquleixing: 6
						},
						{
							text: '孵化器',
							yuanquleixing: 7
						},
						{
							text: '保税园区',
							yuanquleixing: 8
						},
						{
							text: '出口加工区',
							yuanquleixing: 9
						},
						{
							text: '经济开发区',
							yuanquleixing: 10
						},
						{
							text: '化工园区',
							yuanquleixing: 11
						}
					],

					[{
							text: '级别',
							guojiajibie: ''
						},
						{
							text: '国级',
							guojiajibie: 1
						},
						{
							text: '省级',
							guojiajibie: 2
						},
						{
							text: '区级',
							guojiajibie: 3
						},
						{
							text: '县级',
							guojiajibie: 4
						},
						{
							text: '镇级',
							guojiajibie: 5
						},
						{
							text: '市级',
							guojiajibie: 6
						}
					],

					[{
							text: '更多',
							hangyeleixing: ''
						},
						{
							text: '生物医药',
							hangyeleixing: 1
						},
						{
							text: '医疗器械',
							hangyeleixing: 2
						},
						{
							text: '大健康',
							hangyeleixing: 3
						},
						{
							text: '人工智能',
							hangyeleixing: 4
						},
						{
							text: '文化创意',
							hangyeleixing: 5
						},
						{
							text: '汽车配件',
							hangyeleixing: 6
						},
						{
							text: '新材料',
							hangyeleixing: 7
						},
						{
							text: '教育培训',
							hangyeleixing: 8
						},
						{
							text: '游戏动漫',
							hangyeleixing: 9
						},
						{
							text: '元宇宙',
							hangyeleixing: 10
						},
						{
							text: '软件互联网',
							hangyeleixing: 11
						}
					]
				],
				defaultIndex: [0, 0, 0, 0]
			};
		},
		onLoad(option) {
			this.parkListQuery.yuanquname = option.yuanquname;
			if (this.parkListQuery.yuanquname) {
				this.getParkList();
			} else {
				this.namegetParkList();
			}
		},

		onReachBottom() {
			if (this.parkListQuery.yuanquname) {
				console.log(this.pageNum);
				if (this.pageNum < Math.ceil(this.total / 10)) {
					this.pageNum += 1;
					this.getParkList();
				}
			} else {
				console.log(this.pageNum);
				if (this.pageNum < Math.ceil(this.total / 10)) {
					this.pageNum += 1;
					this.namegetParkList();
				}
			}
			// if(this.parkListQuery.yuanquname){
			// 	this.getParkList();
			// }else{
			// 	this.namegetParkList()
			// }

			// let that = this;
			// setTimeout(function() {
			// 	that.getNewList();
			// }, 500);
		},

		methods: {
			handleFilter() {
				this.parkList = [];
				this.getParkList();
			},
			getParkList() {
				let that = this;
				this.$apiCall.request(
					'post',
					`/yuanqu/list?yuanquname=${that.parkListQuery.yuanquname}&pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&orderbyfield=${
					that.orderbyfield
				}`, {}, {
						sucCb(data) {
							that.total = data.total;
							// that.parkList =data.data
							that.parkList = that.parkList.concat(data.data);
						}
					}
				);
			},
			namegetParkList() {
				// console.log();

				let that = this;
				this.$apiCall.request(
					'post',
					`/yuanqu/list?pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&orderbyfield=${that.orderbyfield}`, {}, {
						sucCb(data) {
							that.total = data.total;
							that.parkList = that.parkList.concat(data.data);
						}
					}
				);
			},
			goToDetailView(id) {
				uni.navigateTo({
					url: `/pages/park/detail?id=${id}`
				});
			},

			onSelected(res) {
				this.parkListQuery.yuanquname = '';
				console.log(res, 111);
				console.log(res[0][0].province, 111);

				let that = this;
				this.$apiCall.request(
					'post',
					`/yuanqu/list?&pageNum=${that.pageNum}&pageSize=${that.pageSize}&queryOption=${that.queryOption}&province=${res[0][0].province}&yuanquleixing=${
					res[1][0].yuanquleixing
				}&guojiaibie=${res[2][0].guojiajibie}&hangyeleixing=${res[3][0].hangyeleixing}`, {}, {
						sucCb(data) {
							that.total = data.total;
							that.parkList = data.data;
						}
					}
				);
			}
			// dateChange(d){
			//    uni.showToast({
			//        icon:'none',
			//        title:d
			//    })
			// }
		}
	};
</script>

<style lang="scss">
	.neirongitem .left {
		position: relative;
		width: 100%;
		height: 191px;
	}

	.neirongitem .left .leftIcon {
		position: absolute;
		top: 0rem;
		left: 1.5rem;
		width: 2rem;
		height: 4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		// background: url('https://img2.baidu.com/it/u=1814268193,3619863984&fm=253&fmt=auto&app=138&f=JPEG?w=632&h=500') no-repeat;
		background: url(/static/img/flag.84594400.png) no-repeat;
		background-size: cover;
	}

	.neirongitem .left .leftIcon .leftIconText {
		width: 1rem;
		padding-top: 0.2rem;
		color: white;
		font-size: 1rem;
	}

	.neirongitem .left .leftVR {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 4rem;
		height: 4rem;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 100%;
		background-size: cover;
		background-color: rgba(0, 0, 0, 0.4);
	}

	.neirongitem .left .leftVR .leftVRText {
		padding-top: 0.5rem;
		color: white;
		font-size: 2rem;
	}

	.neirongitem .right .name {
		font-size: 0.875rem;
		font-family: PingFangHK-Semibold, PingFangHK;
		font-weight: 600;
		color: #000000;
		display: flex;
	}

	.neirongitem .right .name .nameMark {
		width: 1.3rem;
		height: 1.3rem;
		color: white;
		background-color: rgba(254, 119, 67, 1);
		text-align: center;
		margin-left: 0.5rem;
	}

	.neirongitem .right .address {
		font-size: 0.625rem;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: #9c9c9c;
		margin-top: 1.1875rem;
		display: flex;
		align-items: center;
	}

	.neirongitem .right .yuanquhuaxiang {
		padding: 0 18px;
		font-weight: 400;
		font-family: PingFangHK-Regular, PingFangHK;
	}

	.neirongitem .right .yuanquhuaxiang .lable {
		color: #9c9c9c;
	}

	.neirongitem .right .yuanquhuaxiang .items .item {
		color: #fe7743;
		margin-right: 0.375rem;
		padding-left: 0.1875rem;
		padding-right: 0.1875rem;
		border: 1px solid #fe7743;
	}

	.neirongitem .right .price {
		font-size: 0.625rem;
		font-family: PingFangHK-Regular, PingFangHK;
		font-weight: 400;
		color: #9c9c9c;
		margin-top: 1.25rem;
	}

	.neirongitem .right .price .gongyedijia {
		margin-left: 1.5625rem;
	}

	.neirongitem .right .price .price {
		color: #ff6c2e;
	}
</style>